/*
 * facecloud后台登录页面
 * @Author: ljb
 * @Date: 2018-03-26 10:18:23
 * @Last Modified by: ljb
 * @Last Modified time: 2019-11-15 16:33:15
 */
<style lang="less" rel="stylesheet/less" type="text/less">

.v-admin-login-index {
	position: relative;
	padding-top: 20px;
    width: 100%;
    height: 100%;
    padding-top: 20px;
    background-image: url('../../assets/img/1562732755_340420.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    background-color: #f0f2f5;
    color: #fff;
    .login-content {

    height: 600px;
		padding-top: -20px;
		margin: 8% auto 0;

		overflow: hidden;
		display: flex;
		justify-content: center;
		/*tabs选项卡切换*/
		.form-tabs {
			.ivu-tabs-tab {
				padding: 15px 20px;
				font-size: 16px;
			}
			.panx-login{
               height: 480px;
			}
		}
		/*tabs选项卡切换 END*/
        .login-box {
			background: #fff;
            position: relative;
            width: 500px;
            height: 600px;
      padding: 20px 40px;
      	border-radius: 10px;
            h1 {
                line-height: 80px;
                text-align: center;
                letter-spacing: 3px;
                img {
                    width: 50%;
                }
            }
            .left {
				position: absolute;
				top: 370px;
				left: 75px;

				font-size: 14px;
                &:hover {
                    opacity: 0.8;
                }
      }
           .right {
                padding-left: 4px;
                &:hover {
                    opacity: 0.8;
                }
			}
			.form-input {
				padding: 0 40px;
				margin: 70px 0  0  0;
				span {

					font-size: 12px;
					margin-left: 5px;
				}

            }
            .ivu-form .ivu-form-item-label{
                color:cornflowerblue;
             }
            .form-panx-input{
               	padding: 0 40px;
				margin: 30px 0;
				span {

					font-size: 12px;
					margin-left: 5px;
				}
				/*input输入框样式*/
				input {
					display: block;
					border: none;
					border-bottom: 1px solid #E5E5E5;
					width: 100%;
					outline: none;
					font-size: 14px;
					color: #333;
				}
            }
			/*表单按钮样式*/
			.form-button {
				text-align: center;
                 padding-top: 100px;
				.ivu-btn-primary {
					height: 45px;
					width: 350px;
					border-radius: 25px;
					font-size: 16px;
					color: #fff;

				}
      }
      .login-boxTitle{
          font-size: 26px;
          color:cornflowerblue;
          text-align: center;
      }
      .noAccount{
        color:#999999;
        position: absolute;
				top: 300px;
				right: 40px;

				font-size: 14px;
      }
      .noAccount_panx{
        color:#999999;
        position: absolute;
			top: 236px;
			right: -390px;

			font-size: 14px;
      }
			/*表单按钮样式 END*/
        }
    }
    .login-load {
        background-color: rgba(0, 0, 0, 0.5);
    }
    .footer-logo {
        position: absolute;
        bottom: 10px;
        width: 510px;
        height: 30px;
        left: 50%;
        margin-left: -250px;
        img {
			height: 100%;
			vertical-align: middle;
		}
		.footer-filing{
		 font-size: 16px;
		  margin-left: 30px;
         vertical-align: middle;
	}
	}
	.footer-filing{
		 font-size: 16px;
		  margin-left: 30px;

	}
	.language{
		position: absolute;
		right: 40px;
  }
  .faceCloud-title{
    position: absolute;
    color: white;
    font-size: 26px;
    left: 26px;
   font-weight: bold;
     }
}
</style>
<template>
	<div
		class="v-admin-login-index">
		<div class="faceCloud-title">FaceCloud</div>

		<div class="login-content _fun-hide">

			<div
				v-show="!toRegistered_show"
				class="login-box">
				<div class="login-boxTitle">欢迎使用FaceCloud用户控制台</div>

				<Tabs
					:animated="false"
					class="form-tabs"
					value="customer"
					@on-click="changeTabs"
				>
					<TabPane
						label="商家登录"
						class="panx-login"
						name="customer"
					>
						<Form
							ref="formData"
							:model="form_data"
							:rules="ruleInline">


							<Form-item
								prop="phone"
								class="form-input"
							>

								<i-input
									v-model="form_data.phone"
									placeholder="请输入手机号码"
									name="panx-user"

								>
									<Select
										slot="prepend"
										v-model="form_data.area_code"
										style="width:70px"
										name="create-area"
									>
										<Option
											v-for="item in area_code_list"
											:value="item.dial_code"
											:key="item.code"
										>
											+{{ item.dial_code }}
										</Option>
									</Select>


								</i-input>


							</Form-item>
							<Form-item
								prop="verify_code"
								class="form-input"
								style="margin-bottom:16px;"
							>

								<Input
									v-model="form_data.verify_code"
									placeholder="请输入验证码"
									type="text"
									name="panx-verify_code"

									@keydown.enter="handleSubmit('formData')">
								<Button
									v-if="!is_getphonecode"
									slot="append"
									type="primary"
									@click="getPhonecode()"
								>获取手机验证码</Button>
								<Button
									v-else
									slot="append"
									type="primary"
									loading
								>{{ getphonecodedownTime }}秒后可再次发送</Button>
								</Input>
							</Form-item>

							<Form-item
								class="form-button">
								<Button
									type="primary"
									long
									@click="handleSubmit('formData')">
									登录
								</Button>
							</Form-item>

							<div class="noAccount">还没有账号?
								<a
									href="#"
									class="right"
									@click.prevent="toRegistered">
									点击注册
								</a>
							</div>


						</Form>
						<Spin
							v-if="login_loading"
							fix
						>
							<Icon
								type="ios-loading"
								size="18"
								class="demo-spin-icon-load" />
							<div>
								正在登录
							</div>
						</Spin>
					</TabPane>


					<!-- </TabPane> -->
				<!-- <TabPane
						label="Panx登录"
						class="panx-login"
						name="panx"
					>
						<Form
							ref="formDataPanx"
							:model="form_data_panx"
							:rules="rulePanx"
						>
							<Form-item
								label="邮箱账号"
								prop="email"
								class="form-panx-input"
							>

								<input
									v-model="form_data_panx.email"
									name="email"
									placeholder="请输入邮箱账号"
									type="text"
								>
							</Form-item>
							<Form-item
								label="邮箱密码"
								prop="password"
								class="form-panx-input "
							>
								<input
									v-model="form_data_panx.password"
									placeholder="请输入邮箱密码"
									type="password" >
							</Form-item>


							<Form-item
								class="form-button"
							>
								<Button
									type="primary"
									long
									@click="handleSubmitPanx('formDataPanx')">
									登录
								</Button>
							</Form-item>

							<div class="noAccount">还没有账号?
								<a
									href="#"
									class="right"
									@click.prevent="toRegistered">
									点击注册
								</a>
							</div>

						</Form>
					</TabPane> -->

				</Tabs>


			</div>

			<!-- 注册页面 -->
			<div v-show="toRegistered_show">
				<Registered
					:area_code_list="area_code_list"
					@loginShow="loginShow"
				/>
			</div>
		</div>
		<!-- 底部logo -->
		<div class="footer-logo">
			<img
				src="//beauty-mirror.gz.bcebos.com/web_admin%2Fpanx_home_name.png"
				alt="">
			<span class="footer-filing">粤ICP备15045073号</span>
		</div>

	</div>
</div></template>
<script type="text/babel">

/* eslint-disable import/extensions */
import Registered from './Registered';
import qs from 'qs';
/* eslint-endisable import/extensions */
export default {
	components: {
		Registered,
	},
	data() {
		const validatePhone = (rule, value, callback) => {
			if (!value) {
				return callback(new Error('手机号码不能为空!'));
			}
			if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(value))) {
				callback(new Error('请输入正确的手机号码'));
			} else {
				callback();
			}
		};
		const validateVerify_code = (rule, value, callback) => {
			if (!value) {
				return callback(new Error('验证码不能为空!'));
			}
			if (!(/^\d{1,}$/.test(value))) {
				callback(new Error('验证码只能为纯数字'));
			}
			if (value.length !== 6) {
				callback(new Error('验证码的数字为六位'));
			} else {
				callback();
			}
		};

		return {
			login_loading: false, // 登陆中

			toRegistered_show: false, // 注册页不显示为false

			is_getphonecode: false,

			getphonecodedownTime: 60,

			type: 'customer',

			form_data: {
				phone: null, // 手机号码
				verify_code: '', // 验证码，
				area_code: '86',


			},

			form_data_panx: {
               	/*
                panx登录
                */
				email: '',
				password: '',
			},

			area_code_list: [],

			ruleInline: {
				phone: [
					{
					    validator: validatePhone,
						required: true,

						trigger: 'blur,change',
					},
				],
				verify_code: [
					{
						validator: validateVerify_code,
						required: true,
						trigger: 'blur,change',

					},
				],
				email: [
					{ required: true, message: '邮箱账号不能为空!', trigger: 'blur' },
					{ type: 'email', message: '请输入正确的邮箱格式!', trigger: 'blur' },
				],
				password: [
					{ required: true, message: '密码不能为空', trigger: 'blur' },
				],
			},

			rulePanx: {
				email: [
					{ required: true, message: '邮箱账号不能为空!', trigger: 'blur' },
					{ type: 'email', message: '请输入正确的邮箱格式!', trigger: 'blur' },
				],
				password: [
					{
						required: true,
						message: '密码不能为空',
						trigger: 'blur',
					},
					{
						type: 'string', min: 6, max: 16, message: '密码位数为6~16', trigger: 'blur',
					}
					,
				],
			},
		};
	},

	created() {
		this.getAreaCode();
	},


	methods: {
		// 切换tabs
		changeTabs(name) {

			this.type = name;
			this.handleReset('formData');
		},

		/**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs[name].resetFields();
		},

		// 跳转注册页面
		toRegistered() {
			this.toRegistered_show = true;
		},

		/**
		 * 控制登录页面显示
		 * @return {undefined} {description}
		 */
		loginShow() {
			this.toRegistered_show = false;
		},

		// 商家提交表单的方法
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.login_loading = true;

					this.jumpToHomePage(this.form_data);
				} else {
					this.$Message.error('你输入的手机号码或验证码有误');
				}
			});
		},

		// panx提交表单的方法
		handleSubmitPanx(name) {
           	this.$refs[name].validate((valid) => {
				if (valid) {
					this.login_loading = true;

					this.jumpToHomePagePanx(this.form_data_panx);
				} else {
					this.$Message.error('你输入的邮箱账号或密码有误');
				}
			});
 		},


		//  获取地区区号
		getAreaCode() {

			this.axios.get(`${window.location.origin}/admin/api/v1/get-areacode`)

				.then(({ data }) => {
					if (Number(data.code) !== 200) throw new Error(data.error);


					this.area_code_list = data.areacodes;

				})

				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				});

		},

		// 获取手机验证码
		getPhonecode() {
			if (/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form_data.phone)) {
				if (this.area_code_list.length > 0) {
					this.timer();

					const param = {
					 area_code: this.form_data.area_code,
						phone: this.form_data.phone,
					};
					this.axios.post(`${window.location.origin}/admin/api/v1/verifycode/login`, qs.stringify(param))

						.then(({ data }) => {
							if (Number(data.code) !== 200) throw new Error(data.error);

							console.log(data);

			        this.$Message.success('验证码已发送至你手机！');


						})

						.catch((err) => {
							this.$Message.error(err.message || err.statusText);
						});
				} else {
					this.$Message.error('区号数据请求失败！请检查你的网络！');
				}

				 } else if (!this.form_data.phone) {
					 this.$Message.error('请先输入手机号！');
				 } else {
					 this.$Message.error('请输入正确的手机号码！');
				 }


		},

		// 触发定时器
		timer() {
          	this.is_getphonecode = true;
			const sendTime = setInterval(() => {
				this.getphonecodedownTime -= 1;
				if (Number(this.getphonecodedownTime) == 0) {
					clearInterval(sendTime);
					this.getphonecodedownTime = 60;
					this.is_getphonecode = false;
				}
			}, 1000);
		},

		/**
         *  登陆后，转跳到首页
         */
		jumpToHomePage(param) {

			this.axios.post(`${window.location.origin}/admin/api/v1/customer/login`, qs.stringify(param))
				.then(({ data }) => {
					if (data.code === 200) {
						this.$Message.success('登录成功');
						sessionStorage.setItem('name', data.user.name);
						sessionStorage.setItem('token', data.token);
						this.$router.push({
							path: '/home',

						});
					} else {
						throw new Error(data.error);
					}

				})
				.catch((err) => {
					this.$Message.error({
						content: err.message || err.statusText,
						duration: 5,
						closable: true,
					});

					this.login_loading = false;
				});

		},
		/*
        panx邮箱登录跳转到主页
        */
		jumpToHomePagePanx(param) {
           	this.axios.post(`${window.location.origin}/admin/api/v1/admin/login`, qs.stringify(param))
				.then(({ data }) => {
					if (data.code === 200) {
						this.$Message.success('登录成功');
						sessionStorage.setItem('name', data.admin.name);
						sessionStorage.setItem('token', data.token);
						this.$router.push({
							path: '/panx-home',

						});
					} else {
						throw new Error(data.error);
					}

				})
				.catch((err) => {
					this.$Message.error({
						content: err.message || err.statusText,
						duration: 5,
						closable: true,
					});

					this.login_loading = false;
				});
		},

	},
};
</script>
